<template>
  <div ref="refsSearchReviewTableComponentBox">
    <div id="lib-review-header" :class="[windowIsFocus === 1 ? 'window-focus' : 'window-blur']">
      <div id="lib-review-header-logo">
        <el-icon :size="20">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
            <path
              d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54c-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16s16 7.16 16 16s-7.16 16-16 16z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
        <span>审阅</span>
      </div>
      <el-input class="lib-review-header-input" v-model="reviewSearchInput" size="small" />
      <div id="lib-review-header-button-group">
        <el-button :disabled="reviewLockEdit && !reviewSelection" @click="handleReviewSelection" type="primary"
          size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button v-show="reviewSelection && indexMap.size > 0" @click="handleReviewSelectAll"
          :disabled="!reviewSelection" size="small" type="primary" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051V5.627zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2h12.997zM13.47 7.47L9.58 11.358L8.6 10.05a.75.75 0 1 0-1.2.9l1.5 2a.75.75 0 0 0 1.13.08l4.5-4.5a.75.75 0 0 0-1.06-1.06z"
                  fill="currentColor">
                </path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button @click="handleBatchPass(1)"
          :disabled="(!reviewLockEdit && !reviewSelection) || reviewSelectIdSet.size === 0" type="success" size="small"
          link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41L9 16.17z" fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
        <el-button @click="handleBatchPass(0)"
          :disabled="(!reviewLockEdit && !reviewSelection) || reviewSelectIdSet.size === 0" type="danger" size="small"
          link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path
                d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="lib-table-review" :style="`height: ${mainHeight}px;`">
      <template v-for="(item, index) in filterReviewData" :key="index">
        <div
          :class="[reviewSelectIdSet.has(item.id) ? 'lib-table-review-row-lock' : 'lib-table-review-row-hover', 'lib-table-review-row-box']">
          <div
            :class="[reviewSelectIdSet.has(item.id) ? 'lib-table-review-row-lock' : 'lib-table-review-row-hover', 'lib-table-review-row']"
            v-on:dblclick="tagNameDetail(item)">
            <span class="lib-table-review-row-main">
              <el-checkbox :model-value="reviewSelectIdSet.has(item.id)" v-show="reviewSelection" size="small"
                @change="handleReviewSelect($event, item.id)" />
              <n-ellipsis class="lib-table-review-row-value" :line-clamp="1">
                {{ item.title }}
              </n-ellipsis>
            </span>
            <div class="lib-table-review-button-group">
              <el-button @click="handlePass(item, 1)" :disabled="reviewSelection || reviewLockEdit" type="success"
                size="small" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41L9 16.17z" fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
              <el-button :disabled="reviewSelection || reviewLockEdit" @click="handlePass(item, 0)" type="danger"
                size="small" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <path
                      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  beforeCreate() {
    window.electronAPI.windowBlur((_event, value) => {
      if (value === 0) this.windowIsFocus = 0
    })
    window.electronAPI.windowFocus((_event, value) => {
      if (value === 1) this.windowIsFocus = 1
    })
    window.onbeforeunload = () => {
      $MyLibWindowCommunication.close()
    }
  },
  created() {
    this.init()
  },
  beforeMount() {
    this.$nextTick(() => {
      // 监听浏览器高度变化，修改表格高度
      const refsReviewHeader = this.$refs.refsSearchReviewTableComponentBox.children[0]
      this.mainHeight = document.body.offsetHeight
        - refsReviewHeader.offsetHeight
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.offsetHeight
          - refsReviewHeader.offsetHeight
      })
    })
  },
  computed: {
    filterReviewData() {
      const set = new Set()
      for (const index of this.indexMap.values()) {
        const title = index.title.toLowerCase()
        const subtitle = index.subtitle.toLowerCase()
        const input = this.reviewSearchInput.toLocaleLowerCase()
        if (!this.reviewSearchInput || title.includes(input) || subtitle.includes(input))
          set.add(index)
      }
      return set
    }
  },
  methods: {
    async init() {
      const state2Set = await $MyLibDbc.index.getByIndex("state", 2)
      const state3Set = await $MyLibDbc.index.getByIndex("state", 3)

      for (const index of state2Set) {
        this.indexMap.set(index.id, index)
      }
      for (const index of state3Set) {
        this.indexMap.set(index.id, index)
      }
    },
    handleReviewSelect(event, id) {
      if (event) {
        this.reviewSelectIdSet.add(id)
      } else
        this.reviewSelectIdSet.delete(id)
    },
    handlePass(item, state) {
      item.state = state
      $MyLibDbc.index.put(item).then(() => {
        this.indexMap.delete(item.id)
      })
    },
    handleReviewSelection() {
      this.reviewSelection = !this.reviewSelection
      this.reviewLockEdit = !this.reviewLockEdit
    },
    handleReviewSelectAll() {
      this.reviewSelectAll = !this.reviewSelectAll
      if (this.reviewSelectAll)
        for (const id of this.indexMap.keys())
          this.reviewSelectIdSet.add(id)
      else
        this.reviewSelectIdSet.clear()
    },
    handleBatchPass(state) {
      const set = new Set()
      const iterableIterator = this.reviewSelectIdSet.values()
      let value = iterableIterator.next()

      while (value.done === false) {
        const index = this.indexMap.get(value.value)
        index.state = state
        set.add(index)
        this.reviewSelectIdSet.delete(value.value)
        value = iterableIterator.next()
      }
      $MyLibDbc.index.batchPut(set).then(() => {
        for (const value of set)
          this.indexMap.delete(value.id)
      })
    },
    tagNameDetail() {
      const val = []
      val.push('<div style="display: flex;flex-wrap: wrap;flex-direction: column;">')
      for (const key of Object.keys(item)) {
        const name = tagFieldName.get(key)
        if (name)
          val.push(`<p><strong>${name}</strong>:&nbsp;${item[key]}</p>`)
      }
      val.push('</div>')
      ElMessageBox.alert(
        val.join(''),
        // '详情',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          closeOnClickModal: true,
          showClose: false,
          draggable: true,
        }
      ).then(emptyFunction).catch(emptyFunction)
    }
  },
  data() {
    return {
      windowIsFocus: 1,
      mainHeight: 0,
      mainWidth: 0,
      indexMap: new Map(),
      reviewSelectAll: false,
      reviewLockEdit: false,
      reviewSelection: false,
      reviewSearchInput: '',
      reviewSelectIdSet: new Set()
    }
  }
}
</script>

<style>
html,
body,
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-align: center;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.window-blur {
  /* 未选中颜色 */
  background-color: #323233;
}

.window-focus {
  /* 未选中颜色 */
  background-color: #3C3C3C;
}

.lib-table-review-operate-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #252526;
}

.lib-table-review-operate-group .el-button {
  margin: 0 !important;
}

.lib-table-review-operate-group .el-input {
  width: 300px !important;
  margin-left: 50px;
}

.lib-table-review {
  overflow: auto;
  background-color: #1E1E1E;
  width: 100%;
}

.lib-table-review-row {
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #1E1E1E;
  cursor: pointer;
  border-bottom: 0.5px solid #252526;
}

.lib-table-review-row-box {
  padding-right: 5px;
  padding-left: 5px;
}

.lib-table-review-row-lock {
  background-color: #350104;
}

.lib-table-review-row-value {
  margin-left: 10px;
}

.lib-table-review-row-main {
  display: flex;
  align-items: center;
}

.lib-table-review-row-hover:hover {
  background-color: #333333;
}

.lib-table-review-button-group .el-button {
  margin: 0 !important;
}

.lib-review-header-input {
  width: 45% !important;
  height: 23.42px !important;
  -webkit-app-region: no-drag;
}



#lib-review-header-button-group {
  display: flex;
  align-items: center;
  margin-right: 137px !important;
}

#lib-review-header-button-group .el-button {
  -webkit-app-region: no-drag;
}

#lib-review-header-button-group .el-button {
  margin: 0 !important;
}

#lib-review-header-logo {
  display: flex;
  margin-left: 10px;
  align-items: center;
}

#lib-review-header-logo .el-icon {
  margin-right: 10px;
}

#lib-review-header {
  -webkit-app-region: drag;
  width: 100%;
  height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
